<header class="main-header">
    <nav class="nav-menu">
        <!-- 左侧导航链接 -->
        <div class="nav-links">
            <a href="/pages/species-origin/index.html" class="nav-item active">物种起源</a>
            <!-- 后续可扩展其他页面 -->
            <!-- <a href="/pages/galaxy-map/index.html" class="nav-item">星域图谱</a> -->
            <!-- <a href="/pages/cosmic-archive/index.html" class="nav-item">宇宙档案</a> -->
        </div>
        <!-- 主题选择下拉菜单（右侧） -->
        <div class="nav-menu-item dropdown">
            <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false"
                    onclick="displayThemeSelector();">
                🎨 主题
            </button>
            <ul id="themeSelector" class="dropdown-menu" hidden>
                <li><button class="nav-item" data-theme="cosmic">🌌 宇宙太空紫</button></li>
                <li><button class="nav-item" data-theme="deep-space">🌑 深空模式</button></li>
                <li><button class="nav-item" data-theme="starship">🚀 星舰控制台</button></li>
                <li><button class="nav-item" data-theme="ocean-breeze">🌊 海洋微风</button></li>
                <li><button class="nav-item" data-theme="desert-sunset">🌅 沙漠日落</button></li>
                <li><button class="nav-item" data-theme="winter-frost">❄️ 冬季霜冻</button></li>
                <li><button class="nav-item" data-theme="forest-canopy">🌳 森林树冠</button></li>
                <li><button class="nav-item" data-theme="retro-neon">🎮 复古霓虹</button></li>
                <li><button class="nav-item" data-theme="minimal-light">📄 极简浅色</button></li>
                <li><button class="nav-item" data-theme="vintage-paper">📜 复古纸张</button></li>
                <li><button class="nav-item" data-theme="dreamy-pink">🌸 梦幻粉红</button></li>
                <li><button class="nav-item" data-theme="urban-night">🌃 都市夜景</button></li>
                <li><button class="nav-item" data-theme="mechanical-red">⚙️ 机械红</button></li>
                <li><button class="nav-item" data-theme="lava-flow">🌋 熔岩流</button></li>
                <li><button class="nav-item" data-theme="stellar-traveler">🌌 星际旅人</button></li>
            </ul>
        </div>
    </nav>
</header>
<style>
    .main-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 30px;
        margin-bottom: 20px;
        border-bottom: 1px solid;
    }

    .nav-menu {
        display: flex;
        width: 100%;
        justify-content: space-between; /* 左右元素分开 */
        align-items: center;
    }

    .nav-links {
        display: flex;
        gap: 20px; /* 链接之间的间距 */
    }

    .nav-item {
        text-decoration: none;
        padding: 8px 15px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .nav-item.active {
        font-weight: bold;
        box-shadow: 0 0 10px rgba(218, 165, 32, 0.6);
    }

    /* 下拉菜单样式 - 固定在右侧 */
    .nav-menu-item.dropdown {
        position: relative; /* 相对定位，避免脱离文档流 */
    }

    .dropdown-toggle {
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0; /* 菜单右对齐 */
        min-width: 180px;
        margin-top: 5px;
        padding: 10px 0;
        border-radius: 8px;
        list-style: none;
        z-index: 1000; /* 确保在其他内容上方 */
    }

    .dropdown-menu li {
        margin: 0;
    }

    .dropdown-menu button {
        width: 100%;
        padding: 8px 15px;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .dropdown-menu button:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* 隐藏元素 */
    [hidden] {
        display: none !important;
    }
</style>